import { ref, computed } from 'vue';
// groupRef为左侧歌手列表DOM
export default function useShortcut(props, groupRef) {
  // 锚点高度(快捷导航栏每一项的高度)
  const ANCHOR_HEIGHT = 18;

  // 滚动组件实例
  const scrollRef = ref(null);
  const shortcutList = computed(() => {
    return props.data.map((group) => {
      return group.title;
    });
  });

  const touch = {};

  function onShortcutTouchStart(e) {
    // 事件委托拿取对应对象方式:
    // 可以通过e.target.dataset.index(结合自定义属性)

    // 当手指的触碰区域不在快捷导航栏的每一项之中,则不会有e.target.dataset.index(没绑定)
    // 会导致报错,需要在scrollTo方法中队才传入的index做限制

    const anchorIndex = parseInt(e.target.dataset.index);
    // 保存第一个纵坐标(手指刚触碰时)
    touch.y1 = e.touches[0].pageY;
    // 保存第一个索引(手指刚才触碰时)
    touch.anchorIndex = anchorIndex;
    // 滚动至对应目标
    scrollTo(anchorIndex);
  }

  function onShortcutTouchMove(e) {
    // 保存第二个纵坐标
    touch.y2 = e.touches[0].pageY;
    // 求出滑动最后位置和手指触碰屏幕位置之间的距离(偏移量)
    // 或0 正数向下取整的简略写法

    // 通过手指刚触碰屏幕时保存的纵坐标减去手指离开屏幕前的纵坐标,得到之间的距离,减去每个item的高度,就能算出中间隔了几个item的距离
    // 再用手指刚点击屏幕时保存的item索引加上中间隔的item的个数就可以算出最后手指离开屏幕时到达的item的索引,再滚动至目标

    // 报错解析:
    // 在快捷导航栏内部拖动时不会有问题,但是如果手指的拖动距离超出快捷导航栏内部,就会出现报错,原因为一旦超过快捷导航栏内部,偏移量(最初和最后之间相隔的item数量)计算出来的值就会非常大,再加上第一次的索引,就会超过左侧歌手列表数组的对象数量
    // 解决方案,对scrollTo方法传入的index进行限制

    const delta = (touch.y2 - touch.y1) / ANCHOR_HEIGHT | 0;
    // 计算目标索引
    // 初始索引 + 偏移量
    const anchorIndex = touch.anchorIndex + delta;
    // 滚动至对应目标
    scrollTo(anchorIndex);
  }

  // 滚动至目标
  function scrollTo(index) {
    // 当传入的index为NaN时return
    if (isNaN(index)) {
      return;
    }
    // 限制传入的index
    index = Math.max(0, Math.min(shortcutList.value.length - 1, index));

    // 通过点击快捷导航栏滚动到左侧歌手列表对应位置
    // groupRef.value.children[anchorIndex] 当前点击的字母索引的下标,找到对应的DOM(groupRef的子级元素)
    // targetEl为目标DOM
    const targetEl = groupRef.value.children[index];
    // scrollRef.value为scroll组件实例
    // scrollRef.value.scroll 为scroll组件暴露出来的
    // 通过scroll组件拿到scroll组件暴露的scroll实例,通过scroll实例可以调用scroll方法
    const scroll = scrollRef.value.scroll;
    // 通过scroll.scrollToElement()方法可以跳到左侧对应的列表
    scroll.scrollToElement(targetEl, 0);
  }

  return {
    shortcutList,
    scrollRef,
    onShortcutTouchStart,
    onShortcutTouchMove
  };
}
